<!doctype html>
<html>

	<head>
		<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
		<script src="vendor/three.101.min.js"></script>
		<script src="../dist/THREEAR.js"></script>
		<title>THREE AR Basic Barcode Marker Demo</title>
		<!-- Bind window error for error handling -->
		<script>
			// window.addEventListener('error', function(event) {
			// 	alert("ERROR: " + event.message + " at " + event.filename + " : " + event.lineno + " : " + event.colno);
			// });
		</script>
	</head>

	<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
		<button id="dispose">Dispose</button>
		<button id="create">Create</button>
		<script>
		
			var renderer = new THREE.WebGLRenderer({
				alpha: true
			});
			renderer.setClearColor(new THREE.Color('lightgrey'), 0);

			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.domElement.style.position = 'absolute'
			renderer.domElement.style.top = '0px'
			renderer.domElement.style.left = '0px'
			document.body.appendChild( renderer.domElement );

			const dispose = document.getElementById("dispose");
			dispose.style.position = "absolute";
			dispose.style.zIndex = "2";
			dispose.disabled = true;

			const create = document.getElementById("create");
			create.style.position = "absolute";
			create.style.zIndex = "2";
			create.style.left = "100px";
		
			// init scene and camera
			var scene = new THREE.Scene();
			var camera = new THREE.Camera();
			scene.add(camera);

			var source = new THREEAR.Source({ renderer, camera });

			function initTHREEAR() {

				create.disabled = true;

				var markerGroup = new THREE.Group();
				scene.add(markerGroup);
		
				THREEAR.initialize({
					source: source,
					detectionMode: 'mono_and_matrix'
				}).then((controller) => {

					// add a torus knot		
					var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
					var material = new THREE.MeshNormalMaterial(); 
					var torus = new THREE.Mesh( geometry, material );
					torus.position.y = 0.5
					markerGroup.add(torus);

					var geometry = new THREE.CubeGeometry(1,1,1);
					var material = new THREE.MeshNormalMaterial({
						transparent : true,
						opacity: 0.5,
						side: THREE.DoubleSide
					}); 
					var cube = new THREE.Mesh( geometry, material );
					cube.position.y	= geometry.parameters.height/2
					markerGroup.add(cube)

					var patternMarker = new THREEAR.PatternMarker({
						patternUrl: '../data/patt.hiro',
						markerObject: markerGroup,
						minConfidence: 0.2
					});

					controller.trackMarker(patternMarker);

					// run the rendering loop
					var lastTimeMsec = 0;
					requestAnimationFrame(function animate(nowMsec){
						// keep looping
						requestAnimationFrame( animate );
						// measure time
						lastTimeMsec = lastTimeMsec || nowMsec-1000/60;
						var deltaMsec = Math.min(200, nowMsec - lastTimeMsec);
						lastTimeMsec = nowMsec;
						// call each update function
						controller.update( source.domElement );
						// cube.rotation.x += deltaMsec/10000 * Math.PI
						torus.rotation.y += deltaMsec/5000 * Math.PI
						torus.rotation.z += deltaMsec/5000 * Math.PI
						renderer.render( scene, camera );
					});

					var disposeTHREEAR = function() {
						controller.markers.pattern.forEach((marker) => {	
							scene.remove(marker.markerObject);
						});
						source.dispose();
						controller.dispose();
						create.disabled = false;
						dispose.disabled = true;
						dispose.removeEventListener("click", disposeTHREEAR);
					};

					dispose.addEventListener("click", disposeTHREEAR);
					dispose.disabled = false;
				});

			}

			create.addEventListener("click", function() {
				initTHREEAR();
			});
			
		</script>
	</body>
	
</html>
